<template>
	<div class="title">
		<div class="icon-back" @click="tologin(login.vue)">
			<van-icon size="25" name="arrow-left" />	
		</div>
		<div  >注册</div>
	</div>
	
	<div>
		 <van-form>
		           <van-field name="uploader" label="上传头像">
		               <template #input>
		                   <van-uploader v-model="uploader" />
		               </template>
		           </van-field>
		           <van-cell-group>
		               <van-field
		                       v-model="phone"
		                       required
		                       label="手机号"
		                       placeholder="请输入手机号"
		                       :rules="[
		                         { required: true },
		                         { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
		        ]"
		               />
		               <van-field
		                       v-model="sms"
		                       center
		                       clearable
		                       label="短信验证码"
		                       placeholder="请输入短信验证码"
		               >
		                   <template #button>
		                       <van-button size="small" type="primary">发送验证码</van-button>
		                   </template>
		               </van-field>
		               <van-field
		                       v-model="password"
		                       required
		                       type="password"
		                       label="密码"
		                       placeholder="请输入密码"
		               />
		               <van-field
		                       v-model="password1"
		                       required
		                       type="password"
		                       label="确认密码"
		                       placeholder="请再次输入密码"
		               />
		           </van-cell-group>
		           <van-field
		             v-model="fieldValue"
		             is-link
		             readonly
		             label="所在城市"
		             placeholder="请选择所在城市"
		             @click="show = true"
		           />
		           <van-popup v-model:show="show" round position="bottom">
		             <van-cascader
		               v-model="cascaderValue"
		               title="请选择所在城市"
		               :options="options"
		               @close="show = false"
		               @finish="onFinish"
		             />
		           </van-popup>
		       </van-form>
	</div>
	
	 <div style="margin: 20px">
	        <van-button round block style="background-color: #1989fa; color: white;" type="info" native-type="submit" @click="onsubmit">注册</van-button>
	</div>

	
	
	
	
</template>



<script >
	 import { Toast } from 'vant';
	 import { ref } from 'vue';
	 
	   export default {
	          data() {
				   const show = ref(false);
				      const fieldValue = ref('');
				      const cascaderValue = ref('');
				      // 选项列表，children 代表子选项，支持多级嵌套
				      const options = [
				        {
				          text: '浙江省',
				          value: '330000',
				          children: [{ text: '杭州市', value: '330100' }],
				        },
				        {
				          text: '江苏省',
				          value: '320000',
				          children: [{ text: '南京市', value: '320100' }],
				        },
				      ];
				      // 全部选项选择完毕后，会触发 finish 事件
				      const onFinish = ({ selectedOptions }) => {
				        show.value = false;
				        fieldValue.value = selectedOptions.map((option) => option.text).join('/');
				      };
	              return {
	                  phone:'',
	                  sms:'',
	                  password:'',
	                  password1:'',
	                  uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
	                  value: '',
					  show,
					  options,
					  onFinish,
					  fieldValue,
					  cascaderValue,
	                  showPicker: false,
	              };
	          },
	          methods: {
	              onConfirm(value) {
	                  this.value = value;
	                  this.showPicker = false;
	              },
	              tologin(){
	                  this.$router.go(-1);
	              },
	              onsubmit(){
	                  if(this.phone==""||this.sms==""||this.password==""||this.password1==""){
	                      Toast('注册失败！信息未完善');
	                  }
	                  else if(this.password!=this.password1){
	                      Toast('密码输入两次不一致！');
	                  }
	                  else{
	                      Toast.success('注册成功');
	                      this.$notify({
	                          type: "success",
	                          message: "注册成功，3s后返回登录",
	                          duration: 3000,
	                      });
	                      setTimeout(() => {
	                          sessionStorage.clear("regis");
	                          this.$router.go(-1);
	                      }, 3000);
	                  }
	              }
	          },
	      };

	 
</script>




<style scoped>
	.icon-back{
		position: absolute;
		left: 2px;
		top:2px
	}
	
	.title{

		height: 60px;
		line-height: 60px;
		background-color: #1989fa;
	    color: white;
		text-align: center;
		margin-top: 0px;
		margin-bottom: 20px;
		font-size: 25px;
	}
</style>